<template>
	<view>
		<view class="content">
			<view class="content_item">
				<view class="content_item_left">头像</view>
				<view class="content_item_right" @click="choose_img">
					<view class="content_item_right_img">
						<button class="avatar-wrapper"
							open-type="chooseAvatar"
							@chooseavatar="onChooseAvatar">
						</button>
						<image :src="ImgUrl + form.avatar" class="content_item_right_img" mode=""></image>
					</view>
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
				
			</view>
			<view class="content_item">
				<view class="content_item_left">姓名</view>
				<view class="content_item_right" @click="showDialog('name','姓名')">
					<input type="text" disabled placeholder="未设置" v-model="form.name" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="content_item">
				<view class="content_item_left">邮箱</view>
				<view class="content_item_right" @click="showDialog('email','邮箱')">
					<input type="text" disabled placeholder="未设置" v-model="form.email" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view> -->
			<view class="content_item">
				<view class="content_item_left">联系电话</view>
				<view class="content_item_right" @click="showDialog('mobile','联系电话')">
					<input type="text" disabled placeholder="未设置" v-model="form.mobile" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">出生日期</view>
				<view class="content_item_right" @click="showDialog('birthday','出生日期')">
					<input type="text" disabled placeholder="未设置" v-model="form.birthday" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">性别</view>
				<view class="content_item_right" @click="showDialog('gender','性别')">
					<input type="text" disabled placeholder="未设置" v-model="form.genderName" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="content_item">
				<view class="content_item_left">医院名称</view>
				<view class="content_item_right">
					<input type="text" placeholder="未设置" v-model="form.HospitalName" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item" @click="picker_index(3)">
				<view class="content_item_left">医院等级</view>
				<view class="content_item_right">
					<input type="text" disabled placeholder="未设置" v-model="form.HospitaLevel" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item" @click="picker_index(4)">
				<view class="content_item_left">科室</view>
				<view class="content_item_right">
					<input type="text" disabled placeholder="未设置" v-model="form.Department" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">职称</view>
				<view class="content_item_right">
					<input type="text" placeholder="未设置" v-model="form.Department" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">资质</view>
				<view class="content_item_right">
					<input type="text" disabled placeholder="未设置" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">服务时间段</view>
				<view class="content_item_right">
					<input
						type="text"
						disabled
						placeholder="未设置"
						v-model="form.serverStime"
						placeholder-style="color:#999"
						class="content_item_right_input1"
						@click="choose_time(1)"
					/>
					<view class="dd">到</view>
					<input
						type="text"
						disabled
						placeholder="未设置"
						v-model="form.serverEtime"
						placeholder-style="color:#999"
						class="content_item_right_input1"
						@click="choose_time(2)"
					/>
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view> -->
			<view class="content_item">
				<view class="content_item_left">身份证号码</view>
				<view class="content_item_right" @click="showDialog('id_number','身份证号码')">
					<input type="text" placeholder="未设置" v-model="form.id_number" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<view class="content_item">
				<view class="content_item_left">地址</view>
				<view class="content_item_right" @click="showDialog('address','地址')">
					<input type="text" placeholder="未设置" v-model="form.address" placeholder-style="color:#999" class="content_item_right_input" />
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view>
			<!-- <view class="content_item" @click="go_userCard">
				<view class="content_item_left">身份二维码</view>
				<view class="content_item_right">
					<u-icon class="icon" name="arrow-right" color="#999999" size="12"></u-icon>
				</view>
			</view> -->
			<view class="zhuxiao" @click="logoff">注销</view>
		</view>
		<!-- 选择出生日期 -->
		<u-datetime-picker
			v-if="show_dialog.key=='birthday'"
			:show="show_dialog.show"
			mode="date"
			ref="datetimePicker"
			v-model="show_dialog.value"
			:formatter="formatter"
			:minDate="-631180800000"
			:max-date="maxDate"
			confirmText="保存"
			@cancel="dialog_close"
			@confirm="dialog_confirm">
		</u-datetime-picker>
		<!-- 选择性别 -->
		<u-picker
			v-if="show_dialog.key=='gender'"
			:show="show_dialog.show"
			:columns="columns"
			keyName="label"
			confirmText="保存"
			:default-index="[show_dialog.genderIndex]"
			@change="change_gender"
			@cancel="dialog_close"
			@confirm="dialog_confirm">
		</u-picker>
		<u-modal :show="show_dialog.show&&show_dialog.key!='gender'&&show_dialog.key!='birthday'"
			:showCancelButton="true"
			confirmText="保存"
			@cancel="dialog_close"
			@confirm="dialog_confirm">
			<view class="slot-content">
				<u-input
				v-model="show_dialog.value"
				:placeholder="'请输入'+show_dialog.name"
				type="text"
				:border="'surround'" />
			</view>
		</u-modal>

	</view>
</template>

<script>
import uploadImage from '@/common/ossutil/ossutil/uploadFile.js';
import { info,logoff,userChange } from '../../api/login.js';
export default {
	data() {
		return {
			form:{
				avatar:'',
				name:'',
				mobile:'',
				email:'',
				birthday:'',
				gender: '',
				id_number:'',
				id:'',
				address:''
			},
			show_dialog:{
				value:'',
				type:'',
				name:'',
				show:false,
				genderIndex:0
			},
			columns: [
				[{
						label: '男',
						id: 1
				}, {
						label: '女',
						id: 0
				}, {
						label: '未知',
						id: 2
				}]
			],
			maxDate:new Date().getTime()
			// pkindex:-1,
			// year:['一年','二年','三年','四年','五年','六年','七年','八年','九年','十年','十年以上'],
			// speciality:['专业一','专业二','专业三','专业四'],
			// category:['类别一','类别二','类别三','类别四','类别五','类别六'],
			// HospitaLevel:['一级','二级','三级','四级','五级'],
			// Department:['科室一','科室二','科室三','科室四','科室五'],
			// time_index:-1,
		}
	},
	onShow() {
		this.getPer();
	},
	computed:{
		ImgUrl(){
			console.log(this.$store.state.ImgUrl)
			return this.$store.state.ImgUrl
		},
	},
	methods: {
		async showDialog(key,name){
			this.show_dialog = {
				show:true,
				key,
				name,
				value:this.form[key]
			}
			if(key=='birthday'){
				// 微信小程序需要用此写法
				this.$nextTick(()=>{
					this.$refs.datetimePicker.setFormatter(this.formatter)
				})
			} else if(key=='gender'){
				let index = this.columns[0].findIndex(item=>{
					return item.id == this.form[key]
				})
				this.show_dialog.genderIndex = [index||0]
			}
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		edit(){
			const {key,value} = this.show_dialog
			let params = {
				key,
				value,
				id:this.form.id||''
			}
			userChange(params).then(res=>{
				if(res.code == 200001){
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					if(key=='gender'){
						this.form.genderName = this.show_dialog.genderName
					} else {
						this.form[key] = this.show_dialog.value
					}
					this.dialog_close()
					// uni.navigateBack({
					// 	delta: -1
					// })
				} else{
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					
				}
			})
		},
		getPer(){
			info().then(res=>{
				if(res.code == 200001){
					this.form = res.data
				} else if(res.code == 404001) {
					this.form = uni.getStorageSync('userinfo')
				}
				this.form.genderName = this.form.gender==0?'女'
				:this.form.gender==1?'男'
				:'未知'
			})
		},
		onChooseAvatar(e) {
			var that = this;
			uploadImage(e.detail.avatarUrl,'','wechat/', (res) => {
				// that.avatarUrl = res.imgUrl;
				// that.imgName = res.imgName
				console.log(res)
				that.show_dialog = {
					key:'avatar',
					value: res.imgName
				}
				that.edit()
			});
		},
		// choose_img(){
		// 	let that = this
		// 	uni.chooseImage({
		// 		count:1,
		// 		success(res) {
		// 			let path = res.tempFilePaths[0]
		// 			that.show_dialog = {
		// 				key:'avatar',
		// 				value: path
		// 			}
		// 			that.edit()
		// 		}
		// 	})
		// },
		// picker_index(num){
		// 	this.show = true
		// 	this.pkindex = num
		// 	if(num == 1)this.$set(this.columns,0,this.year) //年限
		// 	if(num == 2)this.$set(this.columns,0,this.speciality)//类别
		// 	if(num == 3)this.$set(this.columns,0,this.HospitaLevel)//医院等级
		// 	if(num == 4)this.$set(this.columns,0,this.Department)//科室
		// },
		dialog_close(){
			console.log('关闭')
			this.show_dialog = {
				show:false,
				value:'',
				key:'',
				name:'',
			}
		},
		async dialog_confirm(e){
			const {key,value,name} = this.show_dialog
			if(key=='birthday') {
				const timeFormat = uni.$u.timeFormat;
				this.show_dialog.value = await timeFormat(e.value, 'yyyy-mm-dd')
			} else if(value===''){
				this.$showToast(name+'不能为空')
				return
			}
			this.edit()
		},
		change_gender(e){
			this.show_dialog.genderIndex = e.indexs
			this.show_dialog.genderName = e.value[0].label
			this.show_dialog.value = e.value[0].id
		},
		logoff(){
			uni.showModal({
				title:'提示',
				content:'确认注销当前账号吗?',
				success:res=>{
					if(res.confirm){
						logoff().then(res=>{
							uni.clearStorageSync();
							// uni.setStorageSync('token','')
							// uni.setStorageSync('userinfo',null)
							uni.switchTab({
								url:'/pages/index/index'
							})
						})
					}
				}
			})
		}
	}
}
</script>

<style>
.content {
	padding: 20rpx 30rpx;
	box-sizing: border-box;
	padding-bottom: 100rpx;
}
.content_item {
	padding: 30rpx 0;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1rpx solid #f4f4f4;
}
.content_item_right {
	display: flex;
	align-items: center;
}
.content_item_right_img {
	width: 82rpx;
	height: 82rpx;
	border-radius: 50%;
	background-color: #999;
	position: relative;
}
.icon {
	margin-left: 24rpx;
}
.content_item_right_input {
	width: 400rpx;
	color: #666;
	text-align: right;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.content_item_right_input1 {
	width: 150rpx;
	color: #666;
	text-align: center;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.dd {
	color: #333;
	font-family: Alibaba PuHuiTi 2;
	font-size: 28rpx;
	font-weight: 400;
}
.zhuxiao{
	color: #DF5046;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
	margin-top: 58rpx;
	text-align: center;
}
.slot-content{
	width: 96%;
}
.avatar-wrapper {
	padding: 0;
	width: 82rpx;
	height: 82rpx;
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	border: 0;
	z-index: 11;
	opacity: 0;
}

</style>
